<template>
  <div>
    <div style="padding:10px">
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="success" @click="searchbtn()">搜索</el-button>
      <el-button type="primary" @click="resetbtn()">重置</el-button>
    </div>
    <div style="padding:10px">
      <el-button type="danger" @click="deleteHistoryMessage()">清除</el-button>
    </div>
    <generaltable
      :headerData="headerData"
      :tableData="tableData"
      :total="total"
      @SizeChange="SizeChange"
      @CurrentChange="CurrentChange"
    >
    </generaltable>
  </div>
</template>
<script>
import {
  history,
  historyDelete,
  historySearch
} from "../../api/historyMessage.js";
import generaltable from "../../components/generaltable.vue";
export default {
  name: "HistoricalMessages",
  data() {
    return {
      total: 0,
      page: 1,
      limit: 20,
      dateTime: "",
      headerData: [
        {
          prop: "tplCode",
          label: "模板编码"
        },
        {
          prop: "content",
          label: "消息内容"
        },
        {
          prop: "receiver",
          label: "接受者"
        },
        {
          prop: "createTime",
          label: "发送日期"
        },
        {
          prop: "type",
          label: "消息类型"
        },
        {
          prop: "state",
          label: "状态"
        }
      ],
      tableData: []
    };
  },
  mounted() {
    let _self = this;
    _self.obtainHistory();
  },
  methods: {
    CurrentChange(val) {
      let _self = this;
      _self.page = val;
      _self.obtainHistory();
    },
    SizeChange(val) {
      let _self = this;
      _self.limit = val;
      _self.obtainHistory();
    },
    deleteHistoryMessage() {
      let _self = this;
      _self
        .$confirm("确认清空历史消息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          historyDelete().then(res => {
            if ((res.code = 20000)) {
              _self.obtainHistory();
              _self.$message({
                type: "success",
                message: "清除成功!"
              });
            }
          });
        })
        .catch(() => {
          _self.$message({
            type: "info",
            message: "已取消清除"
          });
        });
    },
    obtainHistory() {
      let _self = this;
      let data = {
        page: _self.page,
        limit: _self.limit
      };
      history(data).then(res => {
        if (res.code == 20000) {
          _self.tableData = [];
          _self.total = res.data.total;
          for (let item of res.data.records) {
            _self.tableData.push({
              tplCode: item.tplCode,
              content: item.content,
              receiver: item.receiver,
              createTime: item.createTime.split(" ")[0],
              type: item.type == 0 ? "短信" : "",
              state: item.state == 2 ? "失败" : "成功"
            });
          }
        }
      });
    },
    searchbtn() {
      let _self = this;
      console.log(_self.dateTime);
      let data = {
        startDate: _self.dateTime[0].split("-").join("") + "000000",
        endDate: _self.dateTime[1].split("-").join("") + "000000"
      };
      historySearch(data).then(res => {
        if (res.code == 20000) {
          _self.tableData = [];
          for (let item of res.data.records) {
            _self.tableData.push(item);
          }
        }
      });
    },
    resetbtn() {
      let _self = this;
      _self.dateTime = "";
      _self.obtainHistory();
    }
  },
  components: {
    generaltable
  }
};
</script>
